<template>
	<view class="scanning-details" >
		<view class="details-text" >
			逝者姓名：<span>郝玉甲</span>
		</view>
		<view class="details-text" >
			扫墓日期：<span>2019-03-03 11:00</span>
		</view>
		<view class="details-text" >
			扫墓顾问：<span>王语嫣</span>
		</view>
		<view class="details-text mb-60" >
			选购套餐：<span>标准套餐（￥199）</span>
		</view>
		
		<!-- 扫墓照片 -->
		<view class="details-title pad-30" >
			<span></span>
			<span>扫墓照片</span>
		</view>
		<view class="img-list" >
			<image v-for="(item,index) in imgList" :key="index"  :src="item.url" ></image>
		</view>
		
		<!-- 扫墓视频 -->
		<view class="details-title pad-30" >
			<span></span>
			<span>扫墓视频</span>
		</view>
		<view class="img-list" v-for="(item,index) in videoList" :key="index">
			<video class="vid-play" :src="item.vidUrl" controls></video>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgList:[
					{url:'../../../static/uview/common/z_img-scaning.png'},
					{url:'../../../static/uview/common/z_img-scaning.png'},
					{url:'../../../static/uview/common/z_img-scaning.png'},
					{url:'../../../static/uview/common/z_img-scaning.png'},
					{url:'../../../static/uview/common/z_img-scaning.png'},
					{url:'../../../static/uview/common/z_img-scaning.png'}
				],
				
				videoList:[
					{
						vidUrl:'https://vd3.bdstatic.com/mda-mf825kxd6uq0eqk4/fhd/cae_h264_nowatermark/1623202510458902408/mda-mf825kxd6uq0eqk4.mp4?v_from_s=sz_haokan_4469&auth_key=1623665980-0-0-278098895d18d1e8b51c00c634becaf5&bcevod_channel=searchbox_feed&pd=1&pt=3&abtest='
					},
					{
						vidUrl:'https://vd3.bdstatic.com/mda-mf825kxd6uq0eqk4/fhd/cae_h264_nowatermark/1623202510458902408/mda-mf825kxd6uq0eqk4.mp4?v_from_s=sz_haokan_4469&auth_key=1623665980-0-0-278098895d18d1e8b51c00c634becaf5&bcevod_channel=searchbox_feed&pd=1&pt=3&abtest='
					},
				]
			};
		}
	}
</script>

<style lang="less">
.scanning-details {
	font-size: 28upx;
	color: #000000;
	padding: 10upx 0;
	.details-text{
		padding: 0 46upx;
		margin-bottom: 40upx;
	}
	.mb-60{
		margin-bottom: 60upx;
	}
	
	.details-title{
		display: flex;
		align-items: center;
		padding-top: 20upx;
		margin-bottom: 50upx;
		span{
			font-size: 32upx;
			font-weight:700;
			margin-left: 6upx;
		}
		span:first-child{
			width: 22upx;
			height: 22upx;
			border-radius: 50%;
			background: #7f4d12;
		}
	}
	
	.pad-30{
		padding-left:  30upx;
		padding-right:  30upx;
	}
	
	.img-list{
		padding:0 36upx;
		image{
			width: 206upx;
			height: 212upx;
			margin-right: 30upx;
			margin-bottom: 20upx;
		}
		image:nth-child(3n+3){
			margin-right:0;
		}
		.vid-play{
			width: 100%;
			height: 400upx;
			margin-bottom: 60upx;
		}
	}
}
</style>
